<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>试题录入</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <el-form
        :model="formInline"
        :rules="rules"
        ref="formRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="学科" prop="subjectID">
          <el-select
            @change="getTwolist()"
            v-model="formInline.subjectID"
            placeholder="请选择"
          >
            <el-option
              v-for="item in simplelist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录" prop="catalogID">
          <el-select v-model="formInline.catalogID" placeholder="请选择">
            <el-option
              v-for="item in Twolist"
              :key="item.vlaue"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterpriseID">
          <el-select v-model="formInline.enterpriseID" placeholder="请选择">
            <el-option
              v-for="item in shortNameList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市"  prop="province">
          <el-select
            @change="handleProvince(formInline.province)"
            class="city"
            v-model="formInline.province"
            placeholder="请选择"
          >
            <el-option
              v-for="item in citySelect.province"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select
            class="city two-city"
            v-model="formInline.city"
            placeholder="请选择"
          >
            <el-option
              v-for="item in citySelect.cityDate"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select   v-model="formInline.direction" placeholder="请选择">
            <el-option
              v-for="item in directionList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型" prop="questionType">
          <el-radio-group v-model="formInline.questionType">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="formInline.difficulty">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="quill" label="题干" prop="question">
          <quill-editor
            class="conent-quill"
            v-model="formInline.question"
          ></quill-editor>
        </el-form-item>
        <!-- 单选 -->
        <el-form-item v-if="formInline.questionType === '1'" label="选项">
          <el-radio
            v-for="item in formInline.options"
            :key="item.code"
            class="raido-change"
            v-model="isRight"
            :label="item.code"
          >
            <span>{{ item.code }}: </span>
            <el-input v-model="item.title" class="radio-input"> </el-input>
            <!-- <div class="update-image" @click.stop="updateimage(item.img)">
                <span class="icon"><i class="el-icon-circle-close"></i></span>
                <span>上传图片</span>
              </div> -->
          </el-radio>

        </el-form-item>
        <!-- 多选 -->
        <el-form-item
          v-if="formInline.questionType === '2'"
          label="选项"
          prop="name"
        >
          <el-checkbox-group v-model="isRightList">
            <div
              v-for="item in formInline.options"
              :key="item.code"
              style="display: flex; align-items: center"
            >
              <el-checkbox class="checkbox-change" :label="item.code">
                <span>{{ item.code }}:</span
                ><el-input
                  v-model="item.title"
                  class="checkbox-input"
                ></el-input>
              </el-checkbox>
              <div class="update-image" @click.stop="updateimage(item.img)">
                <span class="icon"><i class="el-icon-circle-close"></i></span>
                <span>上传图片</span>
              </div>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item v-if="formInline.questionType === '2'">
          <el-button type="danger" @click="addCheckbox"
            >+增加选项与答案</el-button
          >
        </el-form-item>
        <el-form-item label="视频解析" prop="videoURL">
          <el-input  class="beizhu" v-model="formInline.videoURL"></el-input>
        </el-form-item>
        <el-form-item class="quill" label="答案解析" prop="answer">
          <quill-editor
            class="conent-quill"
            v-model="formInline.answer"
          ></quill-editor>
        </el-form-item>
        <el-form-item label="题目备注" prop="remarks">
          <el-input
            class="beizhu"
            type="textarea"
            v-model="formInline.remarks"
          ></el-input>
        </el-form-item>
        <el-form-item label="标签">
          <el-select
            @change="changeTags"
            v-model="tagslist"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in Tagslist"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsubmit">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <input
      type="file"
      @change="changeimage"
      ref="inpref"
      style="display: none"
      name=""
      id=""
    />
  </div>
</template>

<script>
import {
  simple,
  getTwoliequeststRequest,
  getTagslistRequest,
  getCompanysListRequest,
  addQuestionRequest,
  getEditDetailRequest,
  updataQuestionRequest
} from '../../api/hmmm/subjects-simple'
import { direction } from '../../api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  data () {
    return {
      isRightList: [],
      // cities: cityOptions,
      isRight: '',
      input: '',
      directionList: direction,
      CompanysList: [], // 企业列表
      simplelist: [], // 学科列表
      Twolist: [], // 二级列表
      Tagslist: [], // 标签列表
      formInline: {
        direction: '',
        subjectID: '',
        catalogID: '',
        enterpriseID: '', // 企业
        province: '',
        city: '',
        questionType: '',
        difficulty: '',
        question: '',
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ],
        videoURL: '',
        answer: '',
        remarks: '', // 题目备注
        // isPerfect: '' // 是否精选
        tags: ''
      },
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ], // 企业
        province: [
          { required: true, message: '请选择省份', trigger: 'change' }
        ],
        city: [{ required: true, message: '请选择城市', trigger: 'change' }],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择困难程度', trigger: 'change' }
        ],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        options: [],
        videoURL: [],
        answer: [
          { required: true, message: '请输入答案解析', trigger: 'blur' }
        ],
        remarks: [], // 题目备注
        tags: []
      },
      citySelect: {
        province: [],
        cityDate: []
      },
      tagslist: [] // 标签数组
    }
  },
  async created () {
    console.log(this.$route.query.id, 'this.$route.query.id')
    this.getsimplelist()

    this.getCompanysList()
    this.getCityData()
    this.getEditDetail()
  },
  watch: {
    // 多选框  监听这个值 如果变化 怎加或删减 就自动更新 正确选项
    isRightList: {
      handler (newval) {
        console.log(newval)
        this.formInline.options.forEach((item) => {
          if (newval.includes(item.code)) {
            item.isRight = true
          } else {
            item.isRight = false
          }
        })
      }
    },
    // 单选框
    isRight: {
      handler (newval) {
        console.log(newval)
        this.formInline.options.forEach((item) => {
          if (item.code === newval) {
            item.isRight = true
          } else {
            item.isRight = false
          }
        })
      }
    }
  },
  computed: {
    shortNameList: {
      get () {
        return this.CompanysList.map((item) => {
          return { value: item.id, label: item.shortName }
        })
      },
      async set (val) {
        console.log(val, 'val')
      }
    }
  },
  methods: {
    // 获取回显数据
    async getEditDetail () {
      if (this.$route.query.id) {
        const res = await getEditDetailRequest(this.$route.query.id)
        this.formInline = res.data
        console.log(this.formInline, 'item.isRight ')
        this.tagslist = this.formInline.tags.split(',')
        console.log(this.tagslist, 'this.tags')
        if (this.formInline.questionType === '1') {
          this.formInline.options.forEach(item => {
            if (item.isRight === 1) {
              this.isRight = item.code
            }
          })
        }
        if (this.formInline.questionType === '2') {
          this.formInline.options.forEach(item => {
            if (item.isRight === 1) {
              this.isRightList.push(item.code)
            }
          })
        }
      }
    },
    changeimage (e) {
      console.log(e.target.files)
      const file = new FormData()
      file.append('img', e.target.files[0])
      console.dir(file, '333')
    },
    // 上传图
    updateimage (imgurl) {
      console.log(imgurl)
      this.$refs.inpref.click()
    },
    // 增加选项复选框
    addCheckbox () {
      this.formInline.options.push({
        isRight: false,
        code: 'D',
        title: '',
        img: ''
      })
    },
    // 标签
    changeTags () {
      this.formInline.tags = this.tagslist.join(',')
      console.log(this.formInline.tags, 'this.formInline.tags')
    },
    // 提交
    onsubmit () {
      this.$refs.formRef.validate(async (valid) => {
        console.log(valid, '222')
        if (valid) {
          if (this.$route.query.id) {
            await updataQuestionRequest(this.formInline, this.$route.query.id)
            this.$message.success('修改成功')
            this.$router.push('/questions/list')
          } else {
            await addQuestionRequest(this.formInline)
            this.$message.success('添加成功')
            this.$router.push('/questions/list')
          }
        }
      })
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
    },
    // 获取所有企业列表
    async getCompanysList () {
      const res = await getCompanysListRequest()
      console.log(res, '企业列表')
      this.CompanysList = res.data.items
    },
    // 获取二级列表
    async getTwolist () {
      const res = await getTwoliequeststRequest(this.formInline.subjectID)
      const res2 = await getTagslistRequest(this.formInline.subjectID)
      // this.getUsersList()
      this.Twolist = res.data
      console.log(this.Twolist, 'Twolist')
      this.Tagslist = res2.data
    },
    // 获取学科列表
    async getsimplelist () {
      const res = await simple()
      this.simplelist = res.data
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 20px;
  .el-form {
    // width: 50%;
    // background-color: red;
    .el-select,
    .beizhu {
      width: 50%;
    }
    .el-select.city {
      width: 24.5%;
    }
    .el-select.two-city {
      margin-left: 10px;
    }
    .el-radio.raido-change {
      display: block;
      // margin-bottom: 10px;
      .radio-input {
        margin-left: 7px;
        width: 45%,
      }
    }
    .checkbox-input.el-input {
      margin-left: 11px;
      width: 280px;
    }
    .el-checkbox,
    .el-radio {
      margin: 20px 10px;
    }
    .update-image {
      display: inline-block;
      width: 100px;
      height: 60px;
      border: 2px dashed #ccc;
      text-align: center;
      line-height: 60px;
      font-size: 15px;
      margin-left: 20px;
      border-radius: 5px;
      position: relative;
      .icon {
        position: absolute;
        top: -29px;
        right: 3px;
        font-size: 15px;
        i {
          font-weight: 500;
        }
      }
    }
    .quill {
      height: 250px;
      .conent-quill {
        height: 150px;
      }
    }
  }
}
</style>
